<template>
  <div class="map-box">
    <div id="map"></div>
    <div class="mapLabel">农田地块展示</div>
    <button class="addLandBtn" @click="addLand()">添加地块</button>
     <!-- <div class="landMenu-r">
     <div class="menuTit">地块列表</div>
      <div class="menuCantent">
        <div class="landlist" v-for="item in landData" :key="item.geoId">
          <div class="pic">
            <img src="../../../assets/iconImage/田地.png" alt="" />
          </div>
          <div class="landName">{{ item.landName }}</div>
          <div class="landPlant">{{ item.plantingVariety }}</div>
          <div class="landArea">{{ item.landArea }} 亩</div>
        </div>
      </div>
      <button class="addLandBtn" @click="addLand()">添加地块</button>
    </div>-->
  </div>
</template>

<script>
import mapIcon from '@/assets/images/mapIcon.png'
export default {
  data () {
    return {
      map: {},
      T: '',
      handler: null,
      polygonTool: null,
      geoCenter: null,
      baseGeo: null
      // getinfo: ''
    }
  },
  props: {
    landData: {
      type: Array
    },
    plantData: {
      type: Array
    }
  },
  watch: {
    landData: {
      immediate: true,
      handler (newData) {
        setTimeout(() => {
          if (
            newData !== null &&
            typeof newData !== 'undefined' &&
            newData.length !== null
          ) {
            // 调用地图
            this.baseGeo = this.$store.getters.baseData ? this.$store.getters.baseData.baseGeo : ''
            this.load()
          }
        }, 100)
      }
    }
  },
  mounted () {},
  methods: {
    load () {
      const init = new Promise((resolve, reject) => {
        if (window.T) {
          // console.log('地图初始化成功')
          resolve(window.T)
        }
      })
      init.then((T) => {
        this.T = T
        // 卫星底图图层
        const lay = new T.TileLayer('http://t0.tianditu.gov.cn/img_w/wmts?' +
        'SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles' +
        '&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=3608866120174dc307d1ce121ccfde22')
        this.map = new T.Map('map', { layers: [lay] })
        this.map.panTo(this.baseGeo ? new T.LngLat(this.baseGeo.split(',')[0], this.baseGeo.split(',')[1]) : new T.LngLat(119.34084930680076, 28.490377599913185), 16)

        // const geoCenter = JSON.parse(this.landData[0].geoCenter) // 中心点
        // const geoZoom = Number(this.landData[0].geoZoom) // 缩放值
        // this.map.centerAndZoom(
        //   new T.LngLat(geoCenter.lng, geoCenter.lat),
        //   geoZoom
        // )
        if (this.geoCenter === null && this.landData !== []) {
          let MapArray = []
          for (let i = 0; i < this.landData.length; i++) {
            const geoArray = JSON.parse(this.landData[i].geoInfo)
            MapArray = [...MapArray, ...geoArray]
          }
          this.map.setViewport(MapArray)
        } else if (this.landData !== []) {
          this.map.setViewport(this.landData)
        }
        // 循环展示
        for (let j = 0; j < this.landData.length; j++) {
          const geoObj = {}
          geoObj.geoInfo = JSON.parse(this.landData[j].geoInfo) // 经纬度
          geoObj.landName = this.landData[j].landName // 地块名称
          geoObj.landArea = this.landData[j].landArea // 地块面积
          geoObj.plantingVariety = this.landData[j].plantingVariety ? this.landData[j].plantingVariety : '' // 地块种植品种
          const points = []
          for (let i = 0; i < geoObj.geoInfo.length; i++) {
            points.push(
              new T.LngLat(geoObj.geoInfo[i].lng, geoObj.geoInfo[i].lat)
            )
          }
          // 创建面对象
          const polygon = new T.Polygon(points, {
            color: this.landData[j].landType === '田地' ? '#19B560' : '#FFD234',
            weight: 3,
            opacity: 1,
            fillColor: this.landData[j].landType === '田地' ? '#19B560' : '#FFD234',
            fillOpacity: 0.15,
            test: `
                    <div class="polyTitle">
                      <div class="mapTitle"><img src="${mapIcon}" class="mapIcon"/> <span>${geoObj.landName}</span></div>
                      <div class="mapTitle mt10">
                        <div class="lineHeight"></div>
                        <div class="mapContent">
                          <p>种植农作物： ${geoObj.plantingVariety}</p>
                          <p class="mt10">种植亩数： ${(geoObj.landArea)} 亩</p>
                        </div>
                      </div>
                    </div>
                  `
          })
          // polygon.addEventListener('click', this.getinfo)

          // 向地图上添加面
          this.map.addOverLay(polygon)
          if (this.landData[j].pictureLink && this.landData[j].geoCenter) {
            this.markerList(JSON.parse(this.landData[j].geoCenter), require('@/assets/images/union.png'), 1)
            this.markerList(JSON.parse(this.landData[j].geoCenter), this.landData[j].pictureLink)
          }
        }

        // const ctrl = new T.Control.MapType([
        //   // {
        //   //   title: '地图',
        //   //   icon: 'http://api.tianditu.gov.cn/v4.0/image/map/maptype/vector.png', // 地图控件上所要显示的图层图标（默认图标大小80x80）
        //   //   layer: window.TMAP_NORMAL_MAP
        //   // },
        //   {
        //     title: '卫星',
        //     icon: 'http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellite.png',
        //     layer: window.TMAP_SATELLITE_MAP
        //   }
        // ])

        // this.map.addControl(ctrl)
      })
    },
    // 地图点击事件
    markerList (LngLat, http, type) {
      const icon = new this.T.Icon({
        iconUrl: http,
        iconSize: new window.T.Point(type ? 40 : 30, type ? 45 : 30),
        iconAnchor: new window.T.Point(type ? 20 : 15, type ? 30 : 25)
        // iconAnchor: new window.T.Point(10, 56)
      })
      const point = new this.T.LngLat(LngLat.lng, LngLat.lat)
      this.marker = new this.T.Marker(point, {
        icon,
        zIndexOffset: type ? 300 : 9999
        // draggable: true
      }) // 创建标注
      this.map.addOverLay(this.marker) // 将标注添加到地图中
    },
    getinfo (e) {
      // console.log(e)
      const T = this.T
      const that = this
      // const p = e.target
      // const lnglat = new T.LngLat(p.getCenter().lng, p.getCenter().lat)// 获取点击多边形中心经纬度
      // console.log(lnglat)
      const infoWin = new T.InfoWindow() // 创建信息窗口对象
      const Content = e.target.options.test // 设置信息窗口要显示的内容，此处可使用html代码;现在显示的就是之前在polygon实例中添加的数据
      infoWin.setContent(Content) // 信息窗口加入信息
      infoWin.setOffset(new T.Point(0, 0)) // 设置信息窗口边距，第一个决定X方向，第二个决定Y方向
      infoWin.setLngLat(e.lnglat) // 设置信息窗口位置
      that.map.addOverLay(infoWin) // 向地图上添加信息窗口
    },
    addLand () {
      this.$router.push({
        path: '/shuzhongtian/agriAreaAdd'
      })
    }
  }
}
</script>
<style lang="scss" scoped>
#map {
  z-index: 0;
  width: 100%;
  height: 100%;
  // height: 38.0208vw * 0.779;
  // height: 38.0208vw * 0.843;
  border-radius: 12px 12px 12px 12px;
  ::v-deep .tdt-infowindow-content-wrapper{
    background: rgba(14,52,39,0.8);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.2);
  }
  ::v-deep .tdt-infowindow-tip{
    display: none;
  }
  ::v-deep .mapIcon {
    height: 0.2rem;
    margin-right: 0.1rem
  }
  ::v-deep .polyTitle {
    min-width: 2.5rem;
  }
  ::v-deep .mt10 {
    margin-top: 0.15rem !important
  }
  ::v-deep .mapTitle{
    display: flex;
    align-items: center;
    span {
      font-size: 0.2rem;
      font-weight: bold
    }
    p {
      margin: 0;
      font-size: 0.15rem;
    }
    .mt10 {
      margin-top: 0.03rem !important
    }
    .lineHeight {
      width: 0.025rem;
      height: 0.4rem;
      background: #FFFFFF;
      margin: 0 0.15rem 0 0.22rem
    }
  }
}
@media screen and (max-width: 1450px) {
  #map {
    z-index: 0;
    width: 100%;
    // height: 37.0208vw * 0.779;
    height: 100%;
    border-radius: 12px 12px 12px 12px;
  }
}
.map-box {
  position: relative;
  width: 80.2083vw;
  height: 100%;
}
//菜单
.landMenu-r {
  position: absolute;
  top: 10%;
  right: 3%;
  width: 21.875vw;
  height: 29.6875vw * 0.843;
  // background: rgba(14, 36, 28, 0.64);
  border-radius: 12px 12px 12px 12px;
  z-index: 1;
  //标题
  .menuTit {
    // width: 3rem;
    height: 0.7125rem;
    background: rgba(32, 68, 55, 0.64);
    border-radius: 12px 12px 0px 0px;
    color: #fff;
    font-weight: 500;
    font-size: 18px;
    padding: 15px 10px;
    font-family: PingFang SC;
  }
  //内容
  .menuCantent {
    width: 21.875vw;
    padding: 0 0 0 0.26rem;
    .landlist {
      width: 21.875vw;
      display: flex;
      // align-items: center;
      // justify-content: flex-start;
      margin: 0.1rem 0;

      color: #fff;
    }

    .pic {
      width: 0.5rem;
      height: 0.5rem;
      background: rgba(14, 25, 19, 0.64);
      border-radius: 8px 8px 8px 8px;
      margin-right: 0.1rem;
      text-align: center;
      line-height: 0.5rem;

      img {
        width: 0.35rem;
        height: 0.22rem;
        border-radius: 0rem 0rem 0rem 0rem;
      }
    }
    .landName {
      height: 0.5rem;
      width: 0.75rem;
      margin-right: 0.56rem;
      font-size: 0.18rem;
      line-height: 0.5rem;
    }
    .landPlant {
      height: 0.5rem;
      width: 0.8rem;
      margin-right: 0.2rem;
      font-size: 0.18rem;
      line-height: 0.5rem;
    }
    .landArea {
      height: 0.5rem;
      width: 2rem;
      font-size: 0.18rem;
      line-height: 0.5rem;
      text-align: right;
    }
  }
}
  // 按钮
  .addLandBtn {
    position: absolute;
    top: 11%;
    right: 2.5%;
    width: 1.6rem;
    height: 0.55rem;
    background: #00C586;
    // background: linear-gradient(270deg, #2bbf64 0%, #7ebf2b 100%);
    color: #fff;
    border-radius: 0.05rem;
    border: 0;
  }
  .mapLabel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 0.3rem;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    // font-weight: bold;
    padding: 0.2rem 0
  }
// @media screen and (max-width: 1450px) {
//   #map {
//     z-index: 0;
//     width: 80.2083vw;
//     height: 40vh;
//     // height: 37.0208vw * 0.779;
//     border-radius: 12px 12px 12px 12px;
//   }
// }
</style>
